<!--
  @Author: zhanghh
  @Date: 2023/9/5
  @Description 文件上传:
 -->
<template>
  <el-upload
    action="#"
    class="upload"
    ref="upload"
    :limit="excelLimit"
    :multiple="multiple"
    :show-file-list="true"
    :http-request="(e) => {uploadExcel(e)}"
    :before-upload="beforeExcelUpload"
    :on-exceed="handleExceed"
    :on-success="excelUploadSuccess"
    :on-error="excelUploadError"
    :accept="fileType.join(',')">
    <template >
      <div v-show="!fileurl"  style="display:flex;">
        <el-button size="small" type="primary">点击上传</el-button>
        <div class="el-upload__tip">请上传 {{slotTip}}标准格式文件，文件最大为 {{ fileSize }}M</div>
      </div>
      <div v-show="fileurl" style="display:flex;">
        <el-button size="small" type="primary">更换</el-button>
        <div class="el-upload__tip" @click.prevent="open(fileurl)"><a  target="_blank"><i class="el-icon-document"></i> {{filename }}{{resourceType}}</a></div>
      </div>
    </template>
  </el-upload>
</template>

<script>
  export default {
    props: {
      // 上传文件的大小 默认为5m
      fileSize: {
        type: Number,
        default: 5
      },
      // 上传文件的数量
      excelLimit:{
        type: Number,
        default: 1
      },
      //上传文件的类型
      fileType: {
        type: Array,
        default: () => ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
      },
      slotTip:{
        type:String,
        default:".xls , .xlsx"
      },
      // 下载模板的Api
      tempApi: {
        type: Function,
        default: undefined
      },
      // 批量导入的Api
      importApi: {
        type: Function,
        default: undefined
      },
      // 获取表格数据的Api
      getTableList: {
        type: Function,
        default: undefined
      },
      //是否支持多选文件
      multiple:{
        type:Boolean,
        default:false
      },
      fileUrl: {
        type:String,
        require:true
      },
      // 文件地址 ==> 必传
      filePath: {
        type:String,
        require:true
      },
      //文件标题
      fileName:{
        type:String,
        default:"",
      },
      //文件类型
      resourceType:{
        type:String,
        default:"",
      },
    },
    data() {
      return {
        isCover: false,
        dialogVisible: false,
        parameter: {
          title: "",
          fileSize: 5,
        },
        filename:"",
        fileurl:"",
      };
    },
    mounted(){
      this.filename = this.fileName;
      this.fileurl = this.fileUrl;
    },
    methods: {
      open(url){
        if (url) window.open(url)
      },
      acceptParams(params) {
        this.parameter = { ...this.parameter, ...params };
        this.dialogVisible = true;
      },

      emitFileUrl(data) {
        this.$emit("update",data);
      },
      async uploadExcel(param) {
        let excelFormData = new FormData();
        excelFormData.append("file", param.file);
        this.importApi(excelFormData).then((response) =>{
          this.filename = response.data.fileName;
          this.$refs.upload.clearFiles();
          this.emitFileUrl(response.data);
          this.fileurl = response.data.fileUrl;
          this.excelUploadSuccess();
        }).catch((err) =>{
          console.log(err)
          this.excelUploadError(err)
        });
        if (this.parameter.getTableList) {
          this.parameter.getTableList();
        }
      },
      beforeExcelUpload(file) {
        const isExcel = this.fileType.includes(file.type);
        const fileSize = file.size / 1024 / 1024 < this.fileSize;
        // if (!isExcel) {
        //   this.$message({
        //     title: "温馨提示",
        //     message: "上传文件只能是 xls / xlsx 格式！",
        //     type: "warning"
        //   });
        // }
        if (!fileSize) {
          setTimeout(() => {
            this.$message({
              title: "温馨提示",
              message: `上传文件大小不能超过 ${this.fileSize}MB！`,
              type: "warning"
            });
          }, 0);
        }
        return isExcel && fileSize;
      },
      handleExceed() {
        this.$message({
          title: "温馨提示",
          message: `最多只能上传${this.excelLimit}个文件！`,
          type: "warning"
        });
      },
      excelUploadError(err) {
        this.$message({
          title: "温馨提示",
          message: `${err.message}，请您重新上传！`,
          type: "error"
        });
      },
      excelUploadSuccess() {
        this.$message({
          title: "温馨提示",
          message: `上传成功！`,
          type: "success"
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .upload{
    ::v-deep .el-upload__tip{
      margin-top: 0;
      margin-left: 20px;
    }
    ::v-deep .el-upload-list.el-upload-list--text{
      display: none;
    }
  }
</style>

